<template>
	<div class="module-left">
		<div class="module-search">
			<div class="module-search-desc">
				<slot name="title">管理</slot>
			</div>
			<div class="search-content" v-loading="loading">
				<div class="search-inputs">
					<el-input size="mini" class="search-input" v-model="queryData.keyword" :placeholder="$t('请输入关键字')"
						@change="handleChange">
						<i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;" @click="handleChange"></i>
					</el-input>
				</div>
				<div class="search-selects">
					<l-select class="search-select-item" :options="regionCodeOptions" v-model="queryData.regionCode"
						:placeholder="$t('区域')" @change="handleChange" />

					<l-select class="search-select-item" :options="landUseOptions" v-model="queryData.landUseTypeCode"
						:placeholder="$t('用地类型')" @change="handleChange" />
				</div>
				<div class="search-selects">
					<l-select class="search-select-item" :options="stageCodeOptions" v-model="queryData.stageCode"
						:placeholder="$t('更新进度')" @change="handleChange" />

					<l-select class="search-select-item" :options="industrialUpdateCodeOptions"
						v-model="queryData.industrialUpdateCode" :placeholder="$t('更新方式')" @change="handleChange" />
				</div>
				<div class="search-selects">
					<l-number-range v-model="queryData.muTaxQRange" startPlaceholder="最低亩均税收" endPlaceholder="最高亩均税收"></l-number-range>
				</div>
				<BoxSelection :map="mapboxmap" @getGeojson="getGeojson" @clear="handleClear"></BoxSelection>
			</div>
		</div>
		<div class="module-result" id="userResult">
			<div class="module-result-desc">
				<div>
					共找到&nbsp;
					<span style="font-weight: 700;color:#39f">{{ tableTotal || 0 }}</span>
					&nbsp;条数据
				</div>
				<div class="module-result-arrow">
					<span v-if="arrowType == 'down'" @click="arrow('up')"> <i class="el-icon-arrow-up"></i> 收起</span>
					<span v-if="arrowType == 'up'" @click="arrow('down')"> <i class="el-icon-arrow-down"></i> 展开</span>
				</div>
			</div>
			<transition name="expand">
				<div class="module-result-content" v-show="this.arrowType == 'down'">

					<div class="module-list">
						<div class="module-list-item" v-for="(item, idx) in tableData" :key="item.id">
							<div class="module-list-item-serial">
								<img :src="`${rootUrl}img/map/index/index_red.png`" alt="">
								<span class="serial-idx">{{ idx + 1 }}</span>
							</div>
							<div class="module-list-item-content" @click="handleDetails(item)">
								<div class="tags nowrap">
									<span class="tag-item" :class="item.landUseTypeCode" v-if="item.landUseTypeCode">{{
										lr_dataItemName(landUseOptions, item.landUseTypeCode) || '---' }}</span>
									<span class="tag-item" :class="item.stageCode" v-if="item.stageCode">{{
										lr_dataItemName(stageCodeOptions, item.stageCode) || '---' }}</span>
									<span class="tag-item" :class="item.industrialUpdateCode" v-if="item.industrialUpdateCode">{{
										lr_dataItemName(industrialUpdateCodeOptions, item.industrialUpdateCode) || '---'
									}}</span>
								</div>
								<div class="content-text">
									<span class="tab">{{ item.name || '---' }}</span>
									<span class="desc">地址：<span>{{ item.address || '---' }}</span></span>
									<span class="desc">亩均税收(万元/亩)：<span>{{ item.muTax || '---' }}</span></span>
								</div>
							</div>
							<div class="module-list-item-location">
								<img v-if="item.geoPT" :src="`${rootUrl}img/map/location-used1-sel.png`" alt=""
									@click="locationMap(item)">
								<img v-else :src="`${rootUrl}img/map/location-used1.png`" alt="">
							</div>
						</div>
					</div>
					<div class="module-pagination">
						<el-pagination class="pagination-content" @size-change="handleSizeChange"
							@current-change="handleCurrentChange" :current-page.sync="tableCurrentPage" :page-sizes="[10]"
							:page-size="tablePageSize" layout="prev, pager, next,sizes" :total="tableTotal" :pager-count="5">
						</el-pagination>
					</div>
				</div>
			</transition>
		</div>
		<!-- 绘制工具 -->
		<l-dialog title="绘制工具" class="tools-dialog" :visible.sync="dialogVisible" :height="46" :width="270"
			:showMinBtn="false" :showFullscreenBtn="false" :hasBtns="false" :modal="false">
			<Draw ref="drawForm" :map="mapboxmap" v-if="dialogVisible" @save="saveDrawMap"></Draw>
		</l-dialog>
	</div>
</template>

<script>
import BoxSelection from "./BoxSelection.vue";
import Draw from "./MapDraw.vue";
import * as wellknown from "wellknown";
import * as turf from '@turf/turf';

export default {
	components: { BoxSelection, Draw },
	props: ['mapboxmap', 'loading'],
	data() {
		return {
			dialogVisible: false,
			selectInfo: {}, // 当前选择数据row

			queryData: {
				keyword: "",
				regionCode: "",
				landUseTypeCode: "",
				stageCode: "",
				industrialUpdateCode: "",
				muTaxQRange:"",
			},

			tableData: [],
			tableTotal: 0,
			tableCurrentPage: 1,
			tablePageSize: 10,

			arrowType: "down", // 收起、展开

		};
	},
	watch: {},
	computed: {
		regionCodeOptions() { // 区域
			return this.lr_dataItemOptions(this.lr_dataItem['region_code'])
		},
		landUseOptions() { // 用地类型
			return this.lr_dataItemOptions(this.lr_dataItem['land_use_type_code'])
		},
		stageCodeOptions() { // 更新进度
			return this.lr_dataItemOptions(this.lr_dataItem['stage_code'])
		},
		industrialUpdateCodeOptions() { // 更新方式
			return this.lr_dataItemOptions(this.lr_dataItem['industrial_update_code'])
		},



	},
	created() {

	},
	mounted() {

		this.init()
	},
	methods: {
		async init() {
			this.lr_loadDataItem('region_code') // 区域
			this.lr_loadDataItem('land_use_type_code') // 用地类型
			this.lr_loadDataItem('stage_code') // 更新进度
			this.lr_loadDataItem('industrial_update_code') // 更新方式

			// this.loadTableData()
		},

		//#region 搜索 框选 清除
		/** 清空查询 */
		handleClear() {
			this.queryData = {
				communityCode: '',
				keyword: '',
				wkt: '',
				isBindGeo: '',
				projectProgress: '',
				regionCode: '',
				muTaxQRange:''
			}
			this.handleChange()
		},
		/** 获取框选wkt数据 */
		getGeojson(data) {
			this.queryData.wkt = data.wkt
			this.handleChange()
		},
		/** 搜索 查询 */
		handleChange() {
			this.dialogVisible = false
			this.loadTableData()
		},
		//#endregion

		//#region 加载列表
		handleSizeChange(val) {
			this.tablePageSize = val
			this.loadTableData(true)
		},
		handleCurrentChange(val) {
			this.currentPage = val
			this.loadTableData(true)
		},
		/** 加载列表 */
		async loadTableData(isNotFirst) {
			if (!isNotFirst) {
				this.tableCurrentPage = 1
			}
			this.tableLoading = true
			let queryData = this.$deepClone(this.queryData)
			queryData.rows = this.tablePageSize
			queryData.page = this.tableCurrentPage
			queryData.sidx = 'modifyTime'
			queryData.sord = 'DESC'
			const api = window.$crud("land/geo/page");
			let data = await this.$awaitWraper(api.getInfo(queryData))
			if (data != null) {
				this.tableData = data.rows.map(t => {
					if (t.geo && t.geo.length) {
						t.geoJson = wellknown.parse(t.geo[0].geo)
						var polygon = turf.polygon(t.geoJson.coordinates);
						var centroid = turf.centroid(polygon);
						t.geoPT = centroid.geometry
					}


					return t
				})

				this.tableTotal = data.records
			}
			else {
				this.tableData = []
				this.tableTotal = 0
			}
			this.tableLoading = false
		},

		/** 上图 */
		setMapLayer(data) {
			this.$emit('setMapLayer', data)
		},

		/** 加载全部数据 */
		async loadMapData() {
			let queryData = this.$deepClone(this.queryData)
			const api = window.$crud("issue/log/list");
			let data = await this.$awaitWraper(api.getInfo(queryData))
			if (data != null) {
				const mapData = data.map(t => {
					if (t.geo) {
						t.geoJson = wellknown.parse(t.geo)
						t.geoPT = t.geoJson
					}
					return t
				}).filter(t => t.geo)
				this.setMapLayer(mapData)
			}
			else {
				this.setMapLayer([])
			}
			this.tableLoading = false
		},
		//#endregion

		/** 定位 */
		locationMap(data) {
			this.dialogVisible = false
			this.selectInfo = data
			this.$emit('flyToMap', data)
		},
		/** 打开详情 */
		handleDetails(data) {
			this.dialogVisible = false
			this.selectInfo = data
			this.$emit('handleDetails', data)
		},


		//#region  绘制空间信息
		openDrawMap(info) {
			this.dialogVisible = false
			this.selectInfo = info
			var desc = '当前农房暂无空间信息，是否进行绘制？'
			if (info.geo) {
				desc = '当前农房已存在空间信息，是否重新绘制？'
			}
			this.$confirm(this.$t(desc), this.$t('提示'), {
				confirmButtonText: this.$t('绘制'),
				cancelButtonText: this.$t('取消'),
				type: 'warning'
			}).then(async () => {
				this.dialogVisible = true
			}).catch(() => {
				this.$message({
					type: 'info',
					message: this.$t('已取消删除!')
				})
			})
		},
		async saveDrawMap(data) {
			const postData = {
				id: this.selectInfo.id,
				geo: data.wkt || ''
			}
			const api = window.$crud("onemap/info");
			await this.$awaitWraper(api.update(this.selectInfo.id, postData))
			this.$message({
				type: 'success',
				message: this.$t('绘制成功!')
			})
			this.handleChange()

		},

		//#endregion

		/**  收起 展开 */
		arrow(type) {
			this.arrowType = type
		},


	}
};
</script>
<style lang="scss" scoped>
@import "../style/tag.scss";

.module-left {
	width: 420px;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	position: absolute;
	gap: 20px;
	top: 0;
	left: 0;
	padding: 20px 20px 20px 30px;
	color: #000000c2;
}

.module-search {
	border-radius: 5px;
	display: flex;
	flex-direction: column;

	.module-search-desc {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		border-radius: 5px 5px 0 0;
		color: #fff;
		height: 40px;
		background: linear-gradient(
			90deg,
			rgba(0, 108, 255, 0.81) 0%,
			rgba(0, 106, 255, 0.486) 100%
		);
		backdrop-filter: blur(4.414556503295898px);
	}

	.search-content {
		background: #fff;
		border-radius: 0 0 5px 5px;

		padding: 15px 20px;
		display: flex;
		flex-direction: column;
		gap: 10px;

		.search-inputs {
			display: flex;

			.search-select-item {
				width: 100px;

				::v-deep .el-input__inner {
					border-radius: 4px 0 0 4px;
				}
			}

			.search-input {
				width: 100%;

				::v-deep .el-input__inner {
					border-radius: 0 4px 4px 0;
				}
			}
		}

		.search-selects {
			display: flex;
			gap: 10px;
		}
	}

	&-btns {
		display: flex;
		justify-content: space-between;

		.search-btn + .search-btn {
			margin-left: 10px;
		}

		.search-btn {
			width: 100px;
		}
	}
}

.module-result {
	flex: 1;
	overflow-y: auto;
	// height: 100%;
	position: relative;
	background: #fff;
	border-radius: 5px;
	display: flex;
	flex-direction: column;

	.module-result-desc {
		height: 38px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;

		// border-bottom: 1px solid rgba(82, 82, 82, 0.3);
		.module-result-arrow {
			cursor: pointer;

			&:hover {
				color: #39f;
			}
		}
	}

	.module-result-content {
		height: calc(100% - 38px);
		// flex: 1;
	}

	.module-list {
		border-top: 1px solid rgba(82, 82, 82, 0.3);
		height: calc(100% - 40px);
		overflow-y: auto;
		display: flex;
		flex-direction: column;

		.module-list-item {
			position: relative;
			display: flex;
			align-items: center;
			padding: 15px 0 15px 5px;

			&:hover {
				background: #f5f7fb;
			}

			.module-list-item-serial {
				position: relative;
				// height: 80px;
				width: 34px;
				display: flex;
				justify-content: flex-start;
				flex-direction: column;
				align-items: center;

				img {
					width: 28px;
				}

				.serial-idx {
					width: 29px;
					text-align: center;
					position: absolute;
					top: 3px;
					color: #fff;
				}
			}

			.module-list-item-content {
				width: calc(100% - 70px);
				// height: 80px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				cursor: pointer;

				.content-text {
					display: flex;
					flex-direction: column;
				}

				.tab {
					font-weight: bolder;
					color: #343434;
					font-size: 16px;
					margin-right: 10px;
				}

				.desc {
					font-size: 13px;
					font-weight: 400;
					color: #808080;
					> span {
						font-size: 14px;
						font-weight: 600;
						color: #494949;
					}
				}
			}

			.module-list-item-location {
				position: absolute;
				right: 12px;
				top: calc(50% - 10px);
				display: flex;
				align-items: center;

				> span {
					font-size: 12px;
					background: #ebebeb;
					padding: 2px 8px;
					border-radius: 5px;
					margin-right: 5px;

					&.active {
						background: #39f;
						color: #fff;
					}
				}

				img {
					cursor: pointer;
				}
			}
		}

		.module-list-item + .module-list-item {
			border-top: 1px solid #c4d5ddad;
		}
	}

	.module-pagination {
		border-top: 1px solid #bbbbbb;
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 38px;

		::v-deep .pagination-content {
			width: 100%;
			text-align: right;
			padding: 2px 0px;

			.btn-prev {
				padding-right: 0px;
			}

			.el-pagination .btn-next {
				padding-left: 0px;
			}

			.el-pagination__sizes {
				margin-right: 0px !important;
			}

			.el-input--suffix {
				width: 84px;
			}

			.el-pager li {
				min-width: 24px;
			}

			.btn-prev,
			.btn-next,
			.el-pager li {
				color: #9b9b9ba2;
				background: #ffffff00 !important;

				&.active {
					color: #242424;
				}
			}

			.el-input__inner {
				color: #292929;
				background: rgb(255, 255, 255);
				border: none;
			}
		}
	}
}

.tools-dialog {
	::v-deep .el-dialog__header {
		height: 34px;

		.el-dialog__title {
			&::before {
				height: 17px;
				top: 3px;
			}
		}
	}
}

.expand-enter-active,
.expand-leave-active {
	opacity: 1;
	height: 0;
	transition: opacity 0.3s ease-in-out;
}

.expand-enter,
.expand-leave-to {
	height: 0;
	opacity: 0;
}
</style>
